// base
import Taro, { Component } from '@tarojs/taro'
import { View, Picker, Image } from '@tarojs/components'
import SwitchCommon from '@/components/page-components/switch-common'
import { showToast } from '../../../crossplatform/apiservice/toast'

// less
import './index.less'

class MessageSelectSingle extends Component {
  static defaultProps = {
    selectlist: []
  }

  onTap = () => {
    const { type, selectlist, mode, value, read, readTitle } = this.props
    if (read) {
      showToast({
        title: readTitle || '不可修改'
      })
      return
    }
    if (!read && (!selectlist || !selectlist.length) && !mode) {
      this.props.onChange({ type, value })
    }
  }

  onChangeSwitch = () => {
    let { value, type } = this.props
    value = !value
    this.props.onChange({ type, value })
  }
  onChange = event => {
    let { type } = this.props
    let value = event.detail.value
    this.props.onChange({ type, value })
  }
  onMultiChange = event => {
    const column = event.detail.column
    if (column == 0) {
      const type = this.props.type
      const value = event.detail.value
      this.props.onChange({ type, column: value })
    }
  }

  render() {
    const {
      value,
      start,
      end,
      mode,
      selectlist = [],
      selectObject = [],
      withoutborder,
      showFl,
      fields,
      read
    } = this.props
    const isobject = typeof value
    if (mode == 'multiSelector') {
      console.log('multiSelector')
    }
    return (
      <View
        className={`MessageSelectSingle_id96783 ${withoutborder ? 'border-none' : ''}`}
        onClick={this.onTap}
      >
        <View className="name">{this.props.name}</View>
        {mode ? (
          mode == 'switch' ? (
            <SwitchCommon checked={!!value} onChange={this.onChangeSwitch} />
          ) : mode == 'multiSelector' ? (
            <Picker
              onColumnChange={this.onMultiChange.bind(this)}
              onChange={this.onChange}
              mode={mode}
              value={value}
              range={selectObject}
              style="flex:1;"
            >
              <View className="pickwrap">
                <View className={`selectthings ${value.length == 2 ? '' : 'gray'}`}>
                  {value.length == 2
                    ? selectObject[0][value[0]] + ' ' + selectObject[1][value[1]]
                    : '请选择'}
                </View>
                <Image
                  className="imgright"
                  src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
                />
              </View>
            </Picker>
          ) : (
            <Picker
              onChange={this.onChange}
              mode={mode}
              start={start || '1900-01-01'}
              end={end || '2100-01-01'}
              value={value ? value + '-01-01' : '2000-01-01'}
              fields={fields}
              style="flex:1;"
            >
              <View className="pickwrap">
                <View
                  className={`selectthings ${
                    isobject == 'object'
                      ? value && value.length
                        ? ''
                        : 'gray'
                      : value
                      ? ''
                      : 'gray'
                  }`}
                >
                  {isobject == 'object'
                    ? value && value.length
                      ? value.join('/')
                      : '请选择'
                    : value || '请选择'}
                </View>
                <Image
                  className="imgright"
                  src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
                />
              </View>
            </Picker>
          )
        ) : selectlist && selectlist.length ? (
          <Picker
            onChange={this.onChange}
            value={selectlist.findIndex(e => e.value == value)}
            range-key="name"
            range={selectlist}
            style="flex:1;"
          >
            <View className="pickwrap">
              <View
                className={`selectthings ${
                  value || value === 0
                    ? selectlist.find(e => e.value == value)
                      ? ''
                      : 'gray'
                    : 'gray'
                }`}
              >
                {value || value === 0
                  ? (selectlist.find(e => e.value == value) || {}).name
                  : '请选择'}
              </View>
              <Image
                className="imgright"
                src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
              />
            </View>
          </Picker>
        ) : (
          <View className="pickwrap">
            <View
              className={`selectthings ${value || value === 0 ? '' : 'gray'} ${
                read ? 'not-click' : ''
              }`}
            >
              {value || value === 0 ? value : '请选择'}
            </View>
            <Image
              className={`imgright ${showFl ? 'showFl' : ''}`}
              src={
                read
                  ? ''
                  : 'https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png'
              }
            />
          </View>
        )}
      </View>
    )
  }
}

export default MessageSelectSingle
